<template>
  <div class="operateButton">
    <!-- 字典 -->
    <div
      class="zidian"
      @click="handleClick('dictionary')"
      v-permission="'dictionary'"
      v-if="operateButtonList.some((item) => item === 'dictionary')"
    >
      <el-tooltip
        class="item"
        effect="light"
        content="字典"
        placement="top"
        popper-class="testtooltip"
      >
        <i class="iconfont icon-pingtai_zidian"></i>
      </el-tooltip>
    </div>
    <!-- 分配权限 -->
    <div
      @click="handleClick('fenpeiquanxian')"
      v-if="operateButtonList.some((item) => item === 'fenpeiquanxian')"
    >
      <el-tooltip
        class="item"
        effect="light"
        content="分配权限"
        placement="top"
        popper-class="testtooltip"
      >
        <i class="iconfont icon-fenpeishebei"></i>
      </el-tooltip>
    </div>
    <!-- 查看 -->
    <div
      @click="handleClick('chakan')"
      v-permission="'view'"
      v-if="operateButtonList.some((item) => item === 'chakan')"
    >
      <el-tooltip
        class="item"
        effect="light"
        content="查看"
        placement="top"
        popper-class="testtooltip"
      >
        <i class="iconfont icon-chakan"></i>
      </el-tooltip>
    </div>
    <!-- 编辑 -->
    <div
      @click="handleClick('bianji')"
      v-permission="'update'"
      v-if="operateButtonList.some((item) => item === 'bianji')"
    >
      <el-tooltip
        class="item"
        effect="light"
        content="编辑"
        placement="top"
        popper-class="testtooltip"
      >
        <i class="iconfont icon-bianji"></i>
      </el-tooltip>
    </div>
    <!-- 删除 -->
    <div
      @click="handleClick('shanchu')"
      v-permission="'delete'"
      v-if="operateButtonList.some((item) => item === 'shanchu')"
    >
      <el-tooltip
        class="item"
        effect="light"
        content="删除"
        placement="top"
        popper-class="testtooltip"
      >
        <i class="iconfont icon-shanchutianchong"></i>
      </el-tooltip>
    </div>
  </div>
</template>
<script>
// import { getAuthInfo } from "@/util/auth";
import config from "@/config/systemConfig";
export default {
  name: "operateButton",
  data() {
    return {
      config
      // authInfo: getAuthInfo(this.$store.state.user.menu, this.$route.fullPath),
    };
  },
  computed: {
    operateButtonList() {
      /**
       * 如果是弹窗中的表格 因为路由唯一键在页面配置文件已经被list表格占用
       * 所以需要在组件上手动传入operateButtonList（按钮列表）进行配置按钮
       * 无多表格页面可以在页面文件pageconfig上进行配置
       **/
      if (this.$attrs.operateButtonList) {
        return this.$attrs.operateButtonList;
      } else {
        return this.$pageConfig(this.$route.path).operationButtons;
      }
    },
  },
  created() {},
  methods: {
    handleClick(type) {
      this.$emit("operateButtonClick", type);
    },
  },
};
</script>

<style scoped lang='scss'>
.operateButton {
  display: flex;
  justify-content: space-around;
  div {
    width: 22px;
    height: 18px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  // 箭头(不起作用)
  /deep/ .testtooltip .el-tooltip__popper[x-placement^="top"] .popper__arrow {
    border-bottom-color: red !important;
  }
  // 箭头(不起作用)
  /deep/
    .testtooltip
    .el-tooltip__popper[x-placement^="top"]
    .popper__arrow:after {
    border-bottom-color: red !important;
  }
  // 内容(不起作用)
  .testtooltip {
    background: red !important;
    box-shadow: 1px 1px 10px 3px #d3d3d6;
  }
  div:hover {
    cursor: pointer;
  }
}
</style>
